<template>
<div>
    <div class="container ts-content">
        <i class="iconfont" @click="isDoBack(isSearch||isShow)">{{isSearch||isShow?"&#xe62f;":"&#xe63e;"}}</i>
        <div class="ts-search">
            <i v-if="!isSearch" class="iconfont">&#xe629;</i>
            <input :class="inputStyle" type="text" @focus="startSearch" @blur="doBlur" v-model="searchWord" :placeholder="searchNow?searchNow:frontword">
        </div>
        <i :class="toShoppingCart" @click="isDoSearch(isSearch&&!isSearched)" ref="topSearch">{{isSearch&&!isSearched?"搜索":"&#xe618;"}}</i>
    </div>

    <!-- 搜索页 -->
    <div :class="searchAnimate">
        <div class="row ts-searchHistory">
            <div class="row ts-searchTitle">
                <span><i class="iconfont">&#xe629;</i> 历史搜索</span><i class="iconfont" @click="clearDidSearchWord">&#xe645;</i>
            </div>
            <div v-if="didSearchWord.length===0" class="ts-noHistory">
                暂无历史搜索
            </div>
            <ul v-if="didSearchWord.length!==0">
                <li v-for="(v,i) of didSearchWord" @click="seachHot(v)" :key="'didSearchWord'+i" class="ts-searchHistoryPill" :hidden="i>2">
                    {{v}}
                </li>
            </ul>
        </div>
        <div class="row ts-hotword">
            <p>
                <i class="iconfont">&#xe668;</i> 热门搜索
            </p>
            <div class="row ts-hotwordShow">
                <span v-for="(v,i) of hotWordList" :key="'hotWordList'+i" @click="seachHot(v.query)" :style="{color:v.color}">{{ v.query }}</span>
            </div>
        </div>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return {
           

            //是否在搜索页
            isSearch:false,

            //是否进行过搜索
            isSearched:false,

            //搜索页是否隐藏
            isHidden:true,

            //是否失去焦点
            isblur:false,

            //搜索关键字
            searchWord:"",

        }
    },
    computed:{

        //当前搜索
        searchNow(){
            // return this.$store.getters.searchNow
            return this.$route.params.q
        },
         //是否在商品展示页
        isShow(){
            // return this.$store.getters.isShow;
            return !!+this.$route.params.isShow;
        },
        //搜索动画样式类名
        searchAnimate(){
            return {
                "ts-searchPage":true,
                "animated":true,
                "bounceInUp":this.isSearch,
                "ts-searchPage-show":this.isHidden,
                "bounceOutDown":!this.isSearch
            }
        },

        //placeholder
        frontword(){
                return this.$store.getters.searchFrontword;
           
        },
        hotWordList(){
                return this.$store.getters.searchHotWord;
            
        },
        didSearchWord(){
            return this.$store.getters.didSearchWord;
        },

        //是否跳转至购物车样式
        toShoppingCart(){
            return {
                iconfont:true,
                "search-text-size":this.isSearch&&!this.isSearched
            }
        },
        //input框样式
        inputStyle(){
            return {
                "ts-input":true,
                "ts-inputFocus":this.isSearch,
                "ts-inputBlur":this.isblur
            }
        }
    },
    methods:{
        clearDidSearchWord(){
            this.$store.commit("clearDidSearchWord");
        },
        //进入搜索页
        startSearch(){
            this.isSearch=true;
            this.isHidden=false;
            this.isblur=false;
            this.isSearched=false;
        },
        //失去焦点
        doBlur(){
            this.isblur=true;
        },
        //是否返回
        isDoBack(test){
            if(test){
                if(this.isShow&&!this.isSearch){
                    //该方法页面刷新时会丢失路由历史信息
                    //蘑菇街使用的是
                    // window.history.go(-1)
                    this.$router.go(-1);
                    this.$store.commit("setIsShow",false);
                }
                this.isSearch=false;
                this.isSearched=false;
                this.searchWord="";
            }else{

            }
        },
        //搜索热词
        seachHot(hot){
            this.searchWord=hot;


            // this.$refs.topSearch.click();//和下面相同效果
            this.isDoSearch(true);

        },
        //判断是否进入搜索页改变两边图标样式
        isDoSearch(test){
            if(test){
                // console.log("搜索")
                //搜索功能(搜索placeholder内容就打开注释)
                // if(this.searchWord!=""){
                    let searchword=this.searchWord||this.searchNow||this.frontword
                    this.searchWord="";

                    if(this.isShow){
                        //需要直接返回时用打开注释
                        // this.$router.replace({path:`/goodsShow/1/${searchword}`});
                        // return
                        // this.$store.dispatch("loadGoodsShowData",searchword);
                    }
                    this.$store.commit("setDidSearchWord",searchword);
                    // //进入商品展示列表
                    // this.$store.commit("setIsShow",true);

                    //重定位分类
                    this.$store.commit("setGoodsSort","pop");

                    //退出搜索页
                    this.isSearch=false;

                    
                    

                    //rest风格传参保证刷新时保留状态数据
                    this.$router.push({path:`/goodsShow/1/${searchword}`});
                // }
            }else{
                //进入购物车
                this.$router.push({name:"ShoppingCart"})
            }
        }
    },
    mounted(){

        //用于返回后能够发送请求
        if(!this.isShow){
            this.$store.commit("setGoodsTypes",[]);
            this.$store.commit("setGoodsList",[]);
        }
        this.$store.commit("setGoodsSort","pop");
        this.$store.dispatch("loadTopSearchData");
    },
    

  
}
</script>
<style lang="less">
@heights:0.8rem;
    .ts-content{
        border-bottom:1px solid #eee;
        position: fixed;
        top:0;
        left:0;
        height:@heights;
        background-color: #fff;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        >.iconfont{
            flex-grow: 2;
            line-height: @heights;
            text-align: center;
            font-size: 0.35rem;
            color:gray;
        }
        /*"搜索"字体大小*/
        >.search-text-size{
            font-size:0.25rem;
        }
        >.ts-search{
            flex-grow: 6;
            height:@heights;
            display: flex;
            align-items: center;
            >.iconfont{
                flex-grow: 1;
                height:0.5rem;
                line-height: 0.5rem;
                color:grey;
                font-size: 0.35rem;
                text-align: center;
                background-color: #eeeeee;
                border-radius: 5px 0 0 5px;
            }


            >.ts-input{
                flex-grow: 9;
                outline: none;
                height:0.5rem;
                border:none;
                border-radius: 0px 5px 5px 0px;
                background-color: #eeeeee;
            }
            /*选中输入框样式*/
            >.ts-inputFocus{
                text-indent: 0.2rem;
                border-radius:5px;
                border:1px solid #FC5779;
            }
            >.ts-inputBlur{
                border:none;
            }
            
        }

    }
    /*搜索提示页*/
    .ts-searchPage{
        position: absolute;
        width:100%;
        height:100%;
        z-index: 9999;
        background: #fff;
        top:0.8rem;
        color:#aaa;
        >.ts-searchHistory{
            padding:0.3rem 0.2rem;
            border-bottom:1px solid #eee;
            >.ts-searchTitle{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size:0.25rem;
                
            }
            >.ts-noHistory{
                padding:0.2rem 0 0 0.3rem;
            }
            >ul{
                padding:0.2rem 0 0 0;
                >.ts-searchHistoryPill{
                    color:#555;
                    display: inline-block;
                    padding:0.05rem 0.1rem;
                    margin:0.05rem 0.2rem;
                    border:1px solid #eee;
                    border-radius: 0.05rem;
                }
            }
        }
        >.ts-hotword{
            padding:0.3rem 0.2rem;
            >p{
                font-size: 0.25rem;
            }
            >.ts-hotwordShow{
                >span{
                    color:#555;
                    display: inline-block;
                    padding:0.05rem 0.2rem;
                    margin:0.2rem 0.2rem;
                    border:1px solid #eee;
                    border-radius: 0.05rem;
                }
            }
        }
    }
    /*搜索提示页是否显示*/
    .ts-searchPage-show{
        display:none;
    }

</style>
